<template>
	<div id="world">
		<header>
			<span><img src="../assets/左箭头.png"></span>
			<p>全球尖货</p>
		</header>
		<div class="imgs">
			<ul>
				<li>
					<a><img src="http://cdn.oudianyun.com/lyf/prod/back-cms/1497922820208_4177_30.jpg@base@tag=imgScale&q=80"></a>
				</li>
				<li>
					<div class="imgs_center">
						<div class="imgs_left">
							<img src="http://cdn.oudianyun.com/lyf/prod/back-cms/1496377765139_1965_33.jpg@base@tag=imgScale&q=80">
						</div>
						<div class="imgs_right">
							<img src="http://cdn.oudianyun.com/lyf/prod/back-cms/1496319798235_3424_26.jpg@base@tag=imgScale&q=80">
							<img src="http://cdn.oudianyun.com/lyf/prod/back-cms/1496838913903_2150_37.jpg@base@tag=imgScale&q=80">
						</div>
					</div>
				</li>
				<li>
					<div class="imgs_bot">
						<img src="http://cdn.oudianyun.com/lyf/prod/back-cms/1497924374340_5050_26.jpg@base@tag=imgScale&q=80">
						<img src="http://cdn.oudianyun.com/lyf/prod/back-cms/1497924386537_9794_38.jpg@base@tag=imgScale&q=80" />
						<img src="http://cdn.oudianyun.com/lyf/prod/back-cms/1497924396154_4787_33.jpg@base@tag=imgScale&q=80">
					</div>
				</li>
			</ul>
		</div>

		<div class="jh_recommend">
			<div class="recommend_list" v-for="item in allData">
				<img :src="item.picUrl" />
				<p>{{item.mpName}}</p>
				<a>{{'¥'+item.price}}</a>
				<div><span>{{item.ratingCount}}</span>条评论&nbsp;好评<span>{{item.positiveRate+'%'}}</span></div>
				<div class="gouwuc">
					<img src="../assets/购物车.png">
				</div>
			</div>
			<div class="recommend_list" v-for="item in allData1">
				<img :src="item.picUrl" />
				<p>{{item.mpName}}</p>
				<a>{{'¥'+item.price}}</a>
				<div><span>{{item.ratingCount}}</span>条评论&nbsp;好评<span>{{item.positiveRate+'%'}}</span></div>
				<div class="gouwuc">
					<img src="../assets/购物车.png">
				</div>
			</div>
		</div>
	</div>

</template>

<script>
	export default {
		data() {
			return {
				allData: [],
				allData1: []
			}
		},
		created() {
			this.axios.get('../../static/qqjh2.json').then(data => {
				//console.log(data.data.data.listObj);
				this.allData = data.data.data.listObj
			}, err => {
				console.log(err)
			});
			this.axios.get('../../static/qqjh1.json').then(data => {
				//		console.log(data.data.data.listObj);
				this.allData1 = data.data.data.listObj
			}, err => {
				console.log(err)
			});
		}
	}
</script>

<style scoped>
	<style>* {
		margin: 0;
		padding: 0;
	}
	
	div {
		margin: 0;
		padding: 0;
	}
	
	img {
		display: block;
	}
	
	.imgs {
		padding-top: 0.4rem;
	}
	
	header {
		width: 100%;
		height: 0.43rem;
		background: white;
		position: fixed;
		z-index: 9999;
		border-bottom: 0.01rem solid #e3e3e4;
	}
	
	header img {
		width: 0.22rem;
		height: 0.22rem;
		float: left;
		margin-top: 0.1rem;
		margin-left: 0.07rem;
	}
	
	header p {
		text-align: center;
		line-height: 0.43rem;
		font-size: 0.18rem;
		margin-right: 0.4rem;
	}
	
	.imgs img {
		width: 100%;
	}
	
	.imgs_center {
		width: 100%;
		float: left;
	}
	
	.imgs_left {
		float: left;
		width: 50%;
	}
	
	.imgs_left img {
		width: 100%;
	}
	
	.imgs_right {
		float: left;
		width: 50%;
	}
	
	.imgs_right img {
		width: 100%;
	}
	
	.imgs_bot {
		width: 100%;
	}
	
	.jh_recommend {
		width: 100%;
	}
	
	.recommend_list {
		width: 50%;
		height: 2.9rem;
		float: left;
	}
	
	.recommend_list img {
		width: 80%;
		margin-top: 0.2rem;
		margin-left: 0.2rem;
	}
	
	.recommend_list p {
		margin-top: 0.1rem;
		margin-left: 0.2rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.recommend_list a {
		display: block;
		margin-top: 0.2rem;
		margin-left: 0.2rem;
		font-size: 0.16rem;
		color: #ff6900;
	}
	
	.recommend_list span {
		color: #ff6900;
	}
	
	.recommend_list div {
		margin-top: 0.05rem;
		margin-left: 0.2rem;
		float: left;
		font-size: 0.13rem;
	}
	
	.gouwuc img {
		width: 65%;
		height: 65%;
		position: relative;
		top: -25px;
		right: 20px;
	}
</style>
</style>